
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('核销员手机号')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-phone" data-rule="required;phone" class="form-control" name="row[phone]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-2 col-sm-2">{:__('手机号验证码')}:</label>
        <div class="col-xs-2 col-sm-2 code">
            <input id="c-code" class="form-control" name="row[code]" type="text" value="">
        </div>
        <input type="button" id="sendCodeBtn" onclick="sendCode()" value="获取验证码">
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('状态')}:</label>
        <div class="col-xs-12 col-sm-8">
            <label class="radio-inline">
                <input type="radio" name="status" value="1" checked> {:__('启用')}
            </label>
            <label class="radio-inline">
                <input type="radio" name="status" value="0"> {:__('不启用')}
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('核销类型')}:</label>
        <div class="col-xs-12 col-sm-8">
            <label class="radio-inline">
                <input type="radio" name="type" value="2" checked> {:__('门店核销员')}
            </label>
            <label class="radio-inline">
                <input type="radio" name="type" value="1"> {:__('自提点核销员')}
            </label>
        </div>
    </div>
    <div class="form-group type-2">
        <label class="control-label col-xs-12 col-sm-2">{:__('选择门店')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-store-selector"
                   data-source="wanlshop.verification/shop"
                   data-multiple="true"
                   data-pagination="true"
                   data-page-size="1"
                   class="form-control selectpage"
                   name="row[address_spot_id]"
                   type="text"
                   data-params='{"type":2}'
                   value="">
        </div>
    </div>
    <div class="form-group type-1" style="display: none;">
        <label class="control-label col-xs-12 col-sm-2">{:__('选择自提点')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-pickup-selector"
                   data-source="wanlshop.verification/shop"
                   data-multiple="true"
                   data-pagination="true"
                   data-page-size="1"
                   class="form-control selectpage"
                   name="row[address_spot_id]"
                   type="text"
                   data-params='{"type":1}'
                   value="">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    $(document).ready(function () {
        // 初始化时根据默认选中的type值显示对应的输入框
        var selectedType = $('input[name="type"]:checked').val();
        toggleInputFields(selectedType);

        // 监听type变化
        $('input[name="type"]').change(function () {
            var selectedType = $(this).val();
            toggleInputFields(selectedType);
        });

        // 根据type显示对应的输入框
        function toggleInputFields(type) {
            if (type == '2') {
                $('.type-1').hide();
                $('.type-2').show();
            } else if (type == '1') {
                $('.type-2').hide();
                $('.type-1').show();
            }
        }
    });
    function sendCode(){
        var button = document.getElementById('sendCodeBtn');
        var phone = document.getElementById('c-phone').value;

        // 验证手机号是否为空
        if (!phone) {
            alert('请输入手机号');
            return;
        }
        $.ajax({
            url: '{:url("wanlshop.verification/sendCode")}',
            type: 'POST',
            data:{phone:phone},
            success: function(response) {
                startCountdown(button);
                toastr.success(response.msg, 'Success');
            },
            error: function() {
                console.error('请稍后再试');
            }
        });
    }
    function startCountdown(button) {
        var countdown = 60; // 倒计时60秒
        button.disabled = true; // 禁用按钮
        button.value = `重新获取(${countdown})`; // 更新按钮文字

        var interval = setInterval(function() {
            countdown--;
            button.value = `重新获取(${countdown})`; // 更新按钮文字

            if (countdown === 0) {
                clearInterval(interval); // 清除倒计时
                button.disabled = false; // 启用按钮
                button.value = '获取验证码'; // 恢复按钮文字
            }
        }, 1000);
    }
</script>

